<template>
  <view>
    <!-- 余额卡片 -->
    <view class="balance-card">
      <view class="balance-title">当前余额</view>
      <view class="balance-amount">{{ balance }} 元</view>
      <button @click="recharge" class="recharge-button">充值</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      balance: 100 // 假设初始余额为100元
    }
  },

  methods: {
    recharge() {
      // 这里可以添加充值逻辑
      console.log('充值按钮被点击');
    },
    pay(order) {
      let url = 'http://localhost:19282/alipay/pay';
      let params = {
        outTradeNo: order.id,
        subject: '学茶商城订单支付',
        totalAmount: order.totalPrice
      }
      window.open(url + '?' + this.qs.stringify(params));
    }
  }
}
</script>

<style>
.balance-card {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  text-align: center;
}

.balance-title {
  font-size: 16px;
  color: #333;
}

.balance-amount {
  font-size: 24px;
  color: #ff6600;
  margin: 10px 0;
}

.recharge-button {
  background-color: #ff6600;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.recharge-button:hover {
  background-color: #e65c00;
}
</style>
